extends layouts/_layout.pug

block variables
	- var activePage = 'charts';
	- var activeGroup = 'none';

block title
	title Charts - Vali Admin

block content
	.app-title
		div
			h1
				i.fa.fa-pie-chart
				|  Charts
			p Various type of charts for your project

		ul.app-breadcrumb.breadcrumb
			li.breadcrumb-item
				i.fa.fa-home.fa-lg
			li.breadcrumb-item
				a(href='#') charts

	.row
		.col-md-6
			.tile
				h3.tile-title Line Chart
				.embed-responsive.embed-responsive-16by9
					canvas.embed-responsive-item(id="lineChartDemo")

		.col-md-6
			.tile
				h3.tile-title Bar Chart
				.embed-responsive.embed-responsive-16by9
					canvas.embed-responsive-item(id="barChartDemo")

		.col-md-6
			.tile
				h3.tile-title Radar Chart
				.embed-responsive.embed-responsive-16by9
					canvas.embed-responsive-item(id="radarChartDemo")

		.col-md-6
			.tile
				h3.tile-title Polar Chart
				.embed-responsive.embed-responsive-16by9
					canvas.embed-responsive-item(id="polarChartDemo")

		.col-md-6
			.tile
				h3.tile-title Pie Chart
				.embed-responsive.embed-responsive-16by9
					canvas.embed-responsive-item(id="pieChartDemo")

		.col-md-6
			.tile
				h3.tile-title Doughnut Chart
				.embed-responsive.embed-responsive-16by9
					canvas.embed-responsive-item(id="doughnutChartDemo")


block specific-js
	script(type='text/javascript', src="js/plugins/chart.js")
	script(type='text/javascript').
		var data = {
			labels: ["January", "February", "March", "April", "May"],
			datasets: [
				{
					label: "My First dataset",
					fillColor: "rgba(220,220,220,0.2)",
					strokeColor: "rgba(220,220,220,1)",
					pointColor: "rgba(220,220,220,1)",
					pointStrokeColor: "#fff",
					pointHighlightFill: "#fff",
					pointHighlightStroke: "rgba(220,220,220,1)",
					data: [65, 59, 80, 81, 56]
				},
				{
					label: "My Second dataset",
					fillColor: "rgba(151,187,205,0.2)",
					strokeColor: "rgba(151,187,205,1)",
					pointColor: "rgba(151,187,205,1)",
					pointStrokeColor: "#fff",
					pointHighlightFill: "#fff",
					pointHighlightStroke: "rgba(151,187,205,1)",
					data: [28, 48, 40, 19, 86]
				}
			]
		};
		var pdata = [
			{
				value: 300,
				color:"#F7464A",
				highlight: "#FF5A5E",
				label: "Red"
			},
			{
				value: 50,
				color: "#46BFBD",
				highlight: "#5AD3D1",
				label: "Green"
			},
			{
				value: 100,
				color: "#FDB45C",
				highlight: "#FFC870",
				label: "Yellow"
			}
		]

		var ctxl = $("#lineChartDemo").get(0).getContext("2d");
		var lineChart = new Chart(ctxl).Line(data);

		var ctxb = $("#barChartDemo").get(0).getContext("2d");
		var barChart = new Chart(ctxb).Bar(data);

		var ctxr = $("#radarChartDemo").get(0).getContext("2d");
		var radarChart = new Chart(ctxr).Radar(data);

		var ctxpo = $("#polarChartDemo").get(0).getContext("2d");
		var polarChart = new Chart(ctxpo).PolarArea(pdata);

		var ctxp = $("#pieChartDemo").get(0).getContext("2d");
		var pieChart = new Chart(ctxp).Pie(pdata);

		var ctxd = $("#doughnutChartDemo").get(0).getContext("2d");
		var doughnutChart = new Chart(ctxd).Doughnut(pdata);
